<template>
  <div>
    <!-- 这里的内容是写死的,就不灵活了,所以用一个占位符 
          父组件在使用子组件的时候,给子组件传递结构 
          这个占位符就叫做插槽-->
      <!-- 第一个插槽用来接收标题 -->
    <slot name="title"> <h3>提示</h3></slot>
    <hr>
    <!-- 第二个插槽用来接收表单 -->
    <slot name="content" uname='张三' book='穿越当兵王'></slot>
    <hr>
    <!-- 第三个插槽用来接收按钮,(没有指定的name插槽,默认default) -->
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  div{
    border: 3px solid rgb(0, 0, 0);
    margin: 50px auto;
    padding: 5px;
    border-radius: 5px;
    width: 300px;
    text-align: center;
  }


</style>